<template>
  <div class="task-detail-container">
    <a-card :title="taskData?.taskName || '任务详情'" :bordered="false">
      <template #extra>
        <a-space>
          <a-button type="primary" @click="goBack">
            <arrow-left-outlined />
            返回
          </a-button>
          <a-button type="primary" danger @click="handleDeleteTask">
            <delete-outlined />
            删除任务
          </a-button>
        </a-space>
      </template>
      
      <div v-if="loading" class="loading-container">
        <a-spin tip="加载中..."></a-spin>
      </div>
      
      <div v-else-if="!taskData" class="error-container">
        <a-empty description="未找到任务数据" />
      </div>
      
      <div v-else class="task-content">
        <a-descriptions :column="1" bordered>
          <a-descriptions-item label="任务名称">{{ taskData.taskName }}</a-descriptions-item>
          <a-descriptions-item label="任务类型">{{ getTaskTypeName(taskData.taskType) }}</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ formatDate(taskData.createTime) }}</a-descriptions-item>
          <a-descriptions-item label="创建者">{{ taskData.creatorName }}</a-descriptions-item>
          <a-descriptions-item label="任务描述">
            <div v-html="taskData.taskDescription || '无描述'"></div>
          </a-descriptions-item>
        </a-descriptions>
        
        <div class="attachments-section" v-if="taskData.attachmentList && taskData.attachmentList.length > 0">
          <h3>附件列表</h3>
          <a-list :dataSource="taskData.attachmentList">
            <template #renderItem="{ item }">
              <a-list-item>
                <a :href="item.attachmentUrl" target="_blank">{{ item.attachmentName }}</a>
              </a-list-item>
            </template>
          </a-list>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { message, Modal } from 'ant-design-vue';
import { ArrowLeftOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import TaskDao from '@/daos/task_dao';
import { formatDate } from '@/utils/date';

const route = useRoute();
const router = useRouter();
const taskDao = new TaskDao();
const taskId = Number(route.params.id);
const taskData = ref(null);
const loading = ref(true);

// 获取任务详情
const fetchTaskDetail = async () => {
  try {
    loading.value = true;
    const response = await taskDao.findTaskByTaskId(taskId, null);
    taskData.value = response.data;
  } catch (error) {
    console.error('获取任务详情失败:', error);
    message.error('获取任务详情失败');
  } finally {
    loading.value = false;
  }
};

// 返回上一页
const goBack = () => {
  router.back();
};

// 获取任务类型名称
const getTaskTypeName = (type) => {
  const typeMap = {
    1: '开发任务',
    2: '测试任务',
    3: '文档任务',
    4: '其他任务'
  };
  return typeMap[type] || '未知类型';
};

// 删除任务
const handleDeleteTask = () => {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除此任务吗？删除后将无法恢复，且相关的分配记录和提交记录也会被删除。',
    okText: '确认',
    cancelText: '取消',
    async onOk() {
      try {
        console.log('正在删除任务，taskId =', taskId);
        await taskDao.deleteTask(taskId);
        message.success('删除任务成功');
        // 返回任务列表页
        router.push('/task/list');
      } catch (error) {
        console.error('删除任务失败:', error);
        message.error(`删除任务失败: ${error.response?.data?.msg || '未知错误'}`);
      }
    }
  });
};

onMounted(() => {
  fetchTaskDetail();
});
</script>

<style scoped>
.task-detail-container {
  padding: 20px;
}

.loading-container, .error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.task-content {
  margin-top: 20px;
}

.attachments-section {
  margin-top: 30px;
}
</style> 